<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>AcraWebconfig</title>
    <link rel="shortcut icon" type="image/x-icon" href="/static/img/favicon.ico"/>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"
            integrity="sha384-feJI7QwhOS+hwpX2zkaeJQjeiwlhOP+SdQDqhgvvo1DsjtiSQByFdThsxO669S2D" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/0.9.90/jsrender.js"
            integrity="sha256-vnIot7uxN4jRvM5P1QDlpy3M8eiR0KwODT0QFKHDhq8=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="/static/js/main.js"></script>
    <script type="text/javascript">
        configParams = JSON.parse({{.ConfigParams}});
        currentConfig = {{.ConfigAcraServer}};
    </script>

    <style type="text/css">
        html {
            font-size: 0.9rem;
        }
        body{
            padding: 1em;
        }
        .template{
            display: none;
        }
    </style>

    <script id="settingsTplRow" type="text/x-jsrender" class="template">
        <table class="table">
            <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Value</th>
                <th scope="col">Description</th>
                <th scope="col">Alias</th>
            </tr>
            </thead>
            <tbody>
            {-for options itemVar="~options"-}
                <tr>
                    <th scope="row">{-:#getIndex()+1-}</th>
                    <td>
                        {-if input_type == 'number'-}
                            <input type="number" name="{-:name-}" value="">
                        {-else input_type == 'radio'-}
                            {-for labels-}
                                <input type="radio" name="{-:~options.name-}" value="{-:~options.values[#index]-}" id="{-:~options.name-}_{->#data-}">
                                <label for="{-:~options.name-}_{->#data-}">{->#data-}</label>
                            {-/for-}
                        {-else-}
                            <input type="text" name="{-:name-}" value="">
                        {-/if-}
                    </td>
                    <td>{-:title-}</td>
                    <td>{-:name-}</td>
                </tr>
            {-/for-}
            </tbody>
        </table>
        <button onclick="javascript: save();">Save</button>
    </script>

</head>

<body>

<div class="row">
    <div class="col-3">
        <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
            <a class="nav-link active show" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">AcraServer Settings</a>
            <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="true">AcraCensor</a>
            <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Zones</a>
        </div>
    </div>
    <div class="col-9">
        <div class="tab-content" id="v-pills-tabContent">
            <div class="tab-pane fade active show" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">

            </div>
            <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
                <p>Coming soon...</p>
            </div>
            <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
                <p>Coming soon...</p>
            </div>
        </div>
    </div>
</div>

</body>
</html>
